<script setup>
import {ArrowDown, Avatar, EditPen, Expand, RemoveFilled} from "@element-plus/icons-vue";
import {nextTick, onMounted, provide, ref} from "vue";
import {TOKEN_NAME} from "@/util/constants.js";
import {doForm, doGet} from "@/util/request.js";
import {ElIcon, ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import 'element-plus/dist/index.css';

const router = useRouter()
let showName = "";
const loginUserInfo = ref([])
onMounted(() => {
  let sessionJson = sessionStorage.getItem(TOKEN_NAME);
  if (sessionJson) {
    showName = JSON.parse(sessionJson).showName
    doGet('operator/menus').then(res => {
      if (res.data.code === 200) {
        loginUserInfo.value = res.data.data
      } else {
        ElMessage.error(res.data.msg)
      }
    })
  }
})

const isCollapse = ref()
const drawer = ref(false)

const openUrl = (menuItem) => {
  router.push({
    path: '/index/' + menuItem.url,
  })
}
// 退出登录
const logout = () => {
  doForm('/operator/logout', {}).then(resp => {
    if (resp.data.code === 200) {
      ElMessage.success('退出成功')
      //删除session
      sessionStorage.removeItem(TOKEN_NAME)
      //删除本地
      localStorage.removeItem(TOKEN_NAME)
      //跳转到登录页
      router.push({
        path: '/',
      })
    } else {
      ElMessage.error('退出失败' + resp.data.msg)
    }
  })
}
//控制右侧中间体刷新页面
let refresh = ref(true)
//刷新页面
const refreshPage = () => {
  refresh.value = false
  nextTick(() => {
    refresh.value = true
  })
}
//设置子页面使用
provide('refresh', refreshPage)
</script>


<template>
  <el-container>
    <el-container>
      <el-header>
        <el-icon color="#fff" size="25px" style="margin-top:6px">
          <Expand @click="drawer = true"/>
        </el-icon>

        <font size="6px" style="font-family: 华文行楷,sans-serif;color:#f0f2f5;margin-left: 770px">
          动付通管理系统
        </font>


        <el-dropdown>
          <font>
            <el-icon>
              <Avatar/>
            </el-icon>
            {{ showName }}
            <el-icon>
              <arrow-down/>
            </el-icon>
          </font>
          <template #dropdown>
            <el-dropdown-menu>

              <!--                <el-dropdown-item @click="showUserInfo">
                                <el-icon>
                                  <Document/>
                                </el-icon>
                                个人信息
                              </el-dropdown-item>-->

              <!--                @click="pwdFormRef=true"-->
              <el-dropdown-item>
                <el-icon>
                  <EditPen/>
                </el-icon>
                <font>
                  修改密码
                </font>
              </el-dropdown-item>

              <el-dropdown-item @click="logout">
                <el-icon>
                  <RemoveFilled/>
                </el-icon>
                <font>
                  退出登录
                </font>
              </el-dropdown-item>

            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-drawer v-model="drawer"
                   direction="ltr"
                   :modal="true"
                   title="系统菜单"
                   :size="'240px'"
                   :close-delay="0"
                   :open-delay="0"
                   :close-on-click-modal="true"
                   :with-header="true">

          <el-menu
              :router="true"
              unique-opened
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
              style="border-right: 0 solid var(--el-menu-border-color)">
            <el-sub-menu v-for="submenu in loginUserInfo" :index="submenu.number">
              <template #title>
                <font size="3px" border="1px">
                  {{ submenu.name }}
                </font>
              </template>
              <el-menu-item :index="chidMenus.number" v-for="chidMenus in submenu.items"
                            @click="openUrl(chidMenus);drawer = false">
                <template #title>
                  {{ chidMenus.name }}
                </template>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-drawer>

        <el-container>
          <el-main>
            <RouterView v-if="refresh"/>
          </el-main>
          <el-footer>
            @版权所有 2025 - 2099 动付通管理系统 || 联系方式：12345678901 || 邮箱：12345678901@qq.com
            <br>
            <a href="https://beian.miit.gov.cn/">京ICP备2025000000号-1</a>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </el-container>

</template>

<style scoped>
.el-container {
  height: calc(94.9vh);
}

.el-header {
  background-color: #545c64;
  line-height: 40px;
  color: #333;
  height: 40px;
}

.el-aside {
  background-color: #888888;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-footer {
  height: 45px;
  font-weight: bolder;
  text-align: center;
  font-size: 15px;
  font-family: "华文楷体", serif;
}

.el-dropdown {
  float: right;
  margin-top: 12px;
  margin-right: 30px;
  cursor: pointer;
  font-weight: bolder;
  color: #fff;
  font-family: '新宋体', serif;
  display: flex;
  align-items: center;
  border: none;
  outline: unset;
}

.el-dropdown :deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

::v-deep(.el-overlay) {
  background-color: rgba(0, 0, 0, 0.001); /* 设置背景颜色和透明度 */
}

.menu-title {
  color: black;
  font-family: '华文细黑', serif;
  font-size: 26px;
}

.menu-header {
  color: #fff;
  text-align: center;
  line-height: 24px;
}

.el-menu-item {
  font-family: '华文楷体', serif;
  font-size: 15px;
}

.el-sub-menu {
  font-family: '华文楷体', serif;
  font-size: 20px;
}

.el-dropdown {
  float: right;
  margin-top: 10px;
  margin-right: 30px;
  cursor: pointer;
  font-weight: bolder;
  color: #fff;
  font-family: '新宋体', serif;
  display: flex;
  align-items: center;
  border: none;
  outline: unset;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

</style>